<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <!-- 车辆关键字选择区域 -->
    <div class="el-card__body">
      <el-form
        ref="searchRef"
        label-width="150px"
        class="formFlex"
        :model="dataForm"
      >
        <el-row>
          <el-form-item label="车辆类型：">
            <template>
              <el-select
                v-model="dataForm.truckTypeName"
                value-key="id"
                placeholder="请选择"
                clearable
                @change="selectTruckTypeGet"
              >
                <!-- 获取车辆类型下拉,维护下拉数据 -->
                <el-option
                  v-for="(item) in carTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="车牌号码：">
            <el-input
              v-model="dataForm.licensePlate"
              placeholder="请输入车牌号码"
              clearable
            />
          </el-form-item>
        </el-row>
        <el-row :gutter="1">
          <el-form-item>
            <el-button
              type="danger"
              @click="search"
            >搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 切换按钮区域 -->
    <div class="tab-change">
      <!-- 按键切换插件 -->
      <tabChange
        :is-show-num="isShowNum"
        :table-data="tableData"
        :default-active-index="defaultActiveIndex"
        @tabChange="tabChange"
      />
    </div>
    <!-- 数据区域 -->
    <div
      class="el-card11"
    >
      <el-row>
        <el-button
          type="danger"
          @click="addTruck"
        >新增车辆</el-button>
      </el-row>
      <el-table
        border
        stripe
        :data="tableData"
      >
        <el-table-column
          align="center"
          label="序号"
          width="70px"
          type="index"
        ></el-table-column>
        <el-table-column
          align="center"
          label="车牌号码"
          prop="licensePlate"
        ></el-table-column>
        <el-table-column
          align="center"
          label="车辆类型"
          prop="truckTypeName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="司机数量"
          prop="driverNum"
        ></el-table-column>
        <template>
          <el-table-column
            align="center"
            label="车辆状态"
            prop="formOfVehicle"
            :formatter="formatterVehiclef"
          >
            <template #default="{row}">
              <span
                class="styleyuan"
                :class="{
                  use: row.workStatus === 1,
                  noUse: row.workStatus === 0
                }"
              ></span>
              {{
                row.workStatus===1?'可用':'停用'
              }}
            </template>
          </el-table-column>
        </template>
        <el-table-column
          align="center"
          label="GPS设备ID"
          prop="deviceGpsId"
        ></el-table-column>
        <el-table-column
          align="center"
          label="实载重量(T)"
          prop="allowableLoad"
        ></el-table-column>
        <el-table-column
          align="center"
          label="实载体积(方)"
          prop="allowableVolume"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="250px"
        >
          <template #default="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="prevDetail(row.id)"
            >查看详情</el-button>
            <el-button
              size="mini"
              type="text"
              :class="{
                redUse: row.workStatus === 1,
              }"
              @click="stateHandler(row)"
            >
              {{ row.workStatus===1?'停用':'启用' }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="vehicleConfig(row.id)"
            >配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="dataForm.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="dataForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- <el-row
      v-else
      class="el-card11"
      type="flex"
      justify="center"
    >
      <div class="demo-image__placeholder">
        <div class="block">
          <span class="demonstration">没有找到您搜索的内容哦~</span>
          <el-image
            :src="require('@/assets/icon-empty.png')"
          >
          </el-image>
        </div>
      </div>
    </el-row> -->
    <!-- 新增车辆弹框组件 -->
    <VehicleAdd
      :is-show-add.sync="isShowAdd"
      @update-truck="getlist"
    />
    <!-- 启用弹框组件 -->
    <vehicleState
      :is-show-state.sync="isShowState"
      :state-row="stateRow"
      @update-state="getlist"
    />
    <!-- 配置司机弹框组件 -->
    <vehicleConfig
      :is-show-config.sync="isShowConfig"
      :is-show-driver.sync="isShowDriver"
      :vehicle-config-id.sync="vehicleConfigId"
      @arrangeConfig="arrangeConfig"
    />
    <!-- 配置司机详情弹窗 -->
    <arrangeDriver
      ref="arrangeDriverRef"
      :is-show-driver.sync="isShowDriver"
      :title-info="titleInfo"
      :form-base-ad="formBaseAd"
      :car-modal-info="carModalInfo"
      :drivers-list="driversList"
    />
  </div>
</template>
<script>
import { getCarTypeList, truckList, truckTypeDetail, unBindDriverList } from '@/api/transit'
import { formOfVehicle } from '@/views/transit/formatter/formatterVehicle'
import VehicleAdd from './components/vehicle-add.vue'
import tabChange from '@/components/TabChange/index.vue'
import vehicleConfig from './components/vehicle-config.vue'
import vehicleState from './components/vehicle-state.vue'
import arrangeDriver from './components/arrange-driver.vue'

export default {
  name: 'Vehicle',
  components: {
    VehicleAdd,
    tabChange,
    vehicleConfig,
    vehicleState,
    arrangeDriver
  },
  data() {
    return {
      showDate: true, // 显示数据页面
      licensePlateAll: [], // 所有的车牌
      carTypeList: [],
      tableData: [],
      dataForm: {
        page: 1,
        pageSize: 10,
        licensePlate: '',
        truckTypeId: '',
        workStatus: ''
      },
      isShowAdd: false,
      isShowState: false,
      isShowConfig: false,
      // 配置司机详情数据
      isShowDriver: false,
      vehicleConfigId: 0,
      titleInfo: {}, // 安排车辆
      formBaseAd: {},
      carModalInfo: {}, // 显示所需要的数据
      driversList: [], // 配置司机列表
      total: 0,
      truckTypeId: '',
      // 切换按钮数据
      isShowNum: true,
      defaultActiveIndex: 2,
      stateRow: {} // 启用状态数据
    }
  },
  created() {
    this.getlist()
    this.getCarTypeList()
  },
  methods: {
    // 获取页面数据
    async getlist() {
      try {
        const { data } = await truckList(this.dataForm)
        this.tableData = data.items
        // console.log(this.tableData)
        this.total = +data.counts
        // 返回新数组
        this.licensePlateAll = this.tableData.map(item => item.licensePlate)
        // console.log(this.licensePlateAll)
        // this.$nextTick(() => {
        //   this.$set(this.tableData, 'total', +data.counts)
        //   // 里面再加一个属性,用来更新操作
        //   // this.$set(this.tableData, 'tableData', [... data.items])
        // })
      } catch (error) {
        console.log(error)
      }
    },
    // 选择页数
    handleSizeChange(pageSize) {
      this.dataForm.pageSize = pageSize
      this.getlist()
    },
    // 跳转页
    handleCurrentChange(page) {
      this.dataForm.page = page
      this.getlist()
    },
    // 用来格式化车辆状态的
    formatterVehiclef(row) {
      const current = formOfVehicle.find(item => item.workStatus === row.workStatus)
      return current.text
    },
    // 新增车辆弹框
    addTruck() {
      this.isShowAdd = true
    },
    // 重置搜索
    resetSearch() {
      this.dataForm = {
        page: 1,
        pageSize: 10,
        licensePlate: '',
        truckTypeId: '',
        workStatus: ''
      }
      this.$refs.searchRef.resetFields()
      this.getlist()
    },
    // 搜索
    search() {
      // this.dataForm.truckTypeId = this.dataForm.truckTypeId 动态添加了
      // if (this.licensePlateAll.includes(this.dataForm.licensePlate)) {
      //   this.dataForm.licensePlate = this.dataForm.licensePlate.trim() // trim去除两边的空格键
      //   this.getlist()
      // } else {
      //   this.showDate = false
      // }
      this.dataForm.licensePlate = this.dataForm.licensePlate.trim() // trim去除两边的空格键
      this.getlist()
    },
    // 查看详情跳转
    prevDetail(id) {
      this.$router.push(`vehicle-detail/${id}`)
    },
    // tab切换
    tabChange(workStatus) {
      if (workStatus === 2) {
        this.dataForm.workStatus = ''
      } else {
        this.dataForm.workStatus = workStatus
      }
      this.getlist(this.dataForm)
    },
    // 下拉选项点击时触发
    // 数组去重
    //  const map = new Map()
    //     for (const item of this.tableData) {
    //       if (!map.has(item.truckTypeId)) {
    //         map.set(item.truckTypeId, item)
    //       }
    //     }
    //     this.selectTableData = [...map.values()]
    selectTruckTypeGet(vId) {
      let obj = {}
      // 找到当前选择的这一项,把truckTypeName属性加到dataForm中,用于选中显示,以及刷新
      obj = this.carTypeList.find((item) => {
        return item.name === vId
      })
      this.$set(this.dataForm, 'truckTypeName', obj.name)
      this.$set(this.dataForm, 'truckTypeId', obj.id)
    },
    async getCarTypeList() {
      const { data: res } = await getCarTypeList()
      this.carTypeList = res
      // console.log(res)
    },
    // 配置司机
    vehicleConfig(id) {
      this.vehicleConfigId = id
      this.isShowConfig = true
    },
    // 确定配置司机
    async arrangeConfig(id) {
      // 根据车辆获取绑定司机
      this.$refs.arrangeDriverRef.getDriverListByCar(id)
      const { data: res } = await truckTypeDetail(id)
      // console.log(res)
      this.carModalInfo = res
      // 未绑定的司机
      const { data: msg } = await unBindDriverList()
      this.driversList = msg
    },
    // 状态选择
    stateHandler(row) {
      this.isShowState = true
      this.stateRow = row
      // console.log(this.stateRow)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.styleyuan{
  width: 6px;
    height: 6px;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 6px;
}
.redUse{
  color: #F92D2D;
}
.use {
      background: #1dc779;
    }
    .noUse {
      background: #e15536;
    }
.tab-item{
  width: 120px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    color: #333;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
}
.el-pagination{
  text-align:center;
  margin-top: 20px;
  margin-bottom: 50px;

}
.el-table{
  margin-top: 25px;
}
.el-card11{
  margin: 10px 20px;
  background-color: #fff;
  border-radius: 10px 10px;
  padding: 30px 20px;
}
.tab-change{
  background-color: #fff;
  height: 60px;
  border-radius: 10px 10px;
  margin: 10px 20px;
  display: flex;
  align-items: center;
  .tab-item{
    width: 100px;
    text-align: center;
  }
}
.el-card__body{
  background-color: #fff;
  height: 100px;
  display: flex;
  align-items: center;
  margin: 0 20px;
  border-radius: 10px 10px;
}
.formFlex{
  display: flex;
  justify-content: start;
  padding-top: 35px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
.startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }
</style>

